<template>
  <div class="congestion-index-ranking content-fade-right">
    <div class="congestion-length content-border-bg">
      <small-title title="拥堵指数排名" />
      <el-table :data="tableData" size="small">
        <el-table-column prop="img" width="60" align="center" label="排名">
          <template #default="scope">
            <div
              class="imgs-box"
              :style="{ background: `url(${scope.row.img})`, 'background-size': '100% 100%' }"
            >
              <!-- <img :src="scope.row.img" alt=""> -->
              <span>{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="名称" />
        <el-table-column prop="num2" align="center" label="拥堵指数" />
        <el-table-column prop="num1" align="center" label="速度" />
        <el-table-column prop="num2" align="center" label="自由流" />
      </el-table>
    </div>
    <div class="content congestion-length content-border-bg">
      <congestion :title="progressTitle" :list="progressList" />
    </div>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs, emits, ref, onMounted, nextTick } from 'vue';
  import congestion from '@/components/congestion/index.vue';
  import smallTitle from '@/components/smallTitle/index.vue';

  export default defineComponent({
    components: { congestion, smallTitle },
    setup() {
      const state = reactive({
        progressTitle: '道路拥堵指数图例',
        progressList: [
          {
            title: '畅通',
            className: 'key_4',
          },
          {
            title: '缓行',
            className: 'key_5',
          },
          {
            title: '拥堵',
            className: 'key_3',
          },
          {
            title: '严重拥堵',
            className: 'key_2',
          },
        ],
      });
      const input = ref('');
      const value = ref('');
      const value2 = ref('');
      const value3 = ref('');
      const options = [
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
        {
          value: 'Option4',
          label: 'Option4',
        },
        {
          value: 'Option5',
          label: 'Option5',
        },
      ];
      const tableData = [
        {
          id: 1,
          img: require('@/assets/images/home/first.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 2,
          img: require('@/assets/images/home/two.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 3,
          img: require('@/assets/images/home/three.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 4,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 5,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 6,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 7,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 8,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 9,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 10,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 11,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 12,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 13,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 14,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
        {
          id: 15,
          img: require('@/assets/images/home/normal.png'),
          name: '孝河路',
          num1: '5',
          num2: '2',
        },
      ];
      return {
        input,
        value,
        value2,
        value3,
        options,
        tableData,
        ...toRefs(state),
      };
    },
  });
</script>
<style lang="less" scoped>
  .congestion-index-ranking {
    height: 89%;
    color: white;
    position: absolute;
    top: 9%;
    right: 30px;
    width: 25%;
    z-index: 3;
    .imgs-box {
      width: 22px;
      height: 22px;
    }
  }
  .content {
    width: 100%;
    margin-top: 30px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    :deep(.progress) {
      height: 5px;
    }
  }
  .title-img {
    width: 400px;
    height: 50px;
    background-size: 108% 100%;
    background: url(@/assets/images/组\ 102.png) no-repeat;
    span {
      width: 111px;
      height: 16px;
      font-size: 20px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #ffffff;
      text-shadow: 0px 0px 4px #4e85ff, 0px 1px 4px #0093ff;
    }
  }
  :deep .el-table__inner-wrapper::before {
    background-color: transparent !important;
  }
  :deep .el-input__wrapper {
    background: transparent !important;
    color: white;
  }
  :deep .el-input__wrapper {
    background-color: #ffffff00;
    box-shadow: 0px 0px 0px;
  }
  :deep .el-select {
    --el-select-border-color-hover: none;
    --el-select-input-focus-border-color: none;
  }

  :deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    color: #fff;
  }

  .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }

  :deep .el-table tr {
    background-color: transparent !important;
  }

  :deep .el-table tr:hover > td {
    background-color: transparent !important;
  }

  :deep .el-table th {
    background-color: transparent !important;
    border-bottom: none !important;
    color: #fff;
  }

  :deep .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent;
    border-bottom: none !important;
  }
</style>
